<template>
	<view>
		<view class="search-nav">
			<view><uni-search-bar placeholder="搜索内容" radius="8" bgColor="#FFFFFF" @confirm="onSearch" @clear="onCancel" cancelButton="none" @input="onInput" /></view>
			<view class="p10-0">
				<text class="searchBtn" @click="onSearchBtn">搜索</text>
			</view>
		</view>
		<view class="text-center p0-15"><image src="https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/recruit-ad.png" mode="widthFix" class="image"></image></view>
		<view class="p15">
			<!-- <uni-segmented-control :current="currentIndex" :values="itemsRecurit" @clickItem="onClickRecuritItem" color="#333333" inActiveColor="#F5F5F5" activeColor="#FFD101"></uni-segmented-control> -->
			<uni-row :gutter="40">
				<uni-col :span="6" v-for="(item,index) in itemsRecurit" :key="index">
					<view :class="currentIndex == index ? 'tabs_' : 'tabs'" @click="onClickRecuritItem(index)">{{item}}</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="p15" v-if="currentIndex == 0">
			<uni-row>
				<uni-col :span="12">
					<view class="text-left">
						<text @click="onType(2)" :class="form.type == 1 ? 'text-unselected' : 'text-selected'">最新</text>
						<text @click="onType(1)" :class="form.type == 2 ? 'text-unselected' : 'text-selected'" class="ml8">推荐</text>
						<!-- <uni-tag @click="onType(2)" :inverted="form.type == 1 ? true : false" text="最新" type="warning" /> -->
						<!-- <uni-tag @click="onType(1)" class="ml8" :inverted="form.type == 2 ? true : false" text="推荐" type="warning" /> -->
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="text-right">
						<text class="text-selected" @click="showDrawer('showLeft')">{{city_item_select_name == '不限' ? '城市' : city_item_select_name}}</text><uni-icons type="down" size="16"></uni-icons>
						<!-- <uni-tag class="mr8" @click="showDrawer('showLeft')" :inverted="true" text="城市" type="warning" /> -->
						<!-- <uni-tag :inverted="true" text="筛选" type="warning" /> -->
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		<view v-if="currentIndex == 0" class="recurit p0-8" @click="onLink('info/index',item.id)" v-for="(item ,index) in dataInfo" :key="index">
			<uni-section :title="item.title" titleFontSize="30rpx" :sub-title="item.city+'·'+item.areas+' | '+item.experience+' | '+item.education" padding="0 0 5px 10px">
				<template v-slot:right><view class="red"><b>{{item.salary}}/{{item.salary_type}}</b></view></template>
			</uni-section>
			<uni-list-item :border="false">
				<template v-slot:header>
					<view>
						<image class="logo" :src="item.company.log" mode="aspectFill"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="pl8 company-title">{{item.company.full_name}}</view>
					<view class="pl8">{{item.company.scale}}</view>
				</template>
			</uni-list-item>
		</view>
		
		<view v-if="currentIndex == 1" class="recurit p15">
			<uni-row>
				<uni-col :span="12" :offset="12">
					<view class="text-right">
						<text class="text-selected" @click="showDrawer('showLeft')">{{city_item_select_name == '不限' ? '城市' : city_item_select_name}}</text><uni-icons type="down" size="16"></uni-icons>
					</view>
				</uni-col>
			</uni-row>
			<view class="mt30">
				<uni-list>
					<uni-list-item @click="onLink('/pages/cpmpany/cpmpany',item.id)" v-for="(item ,index) in company" :key="index" :clickable="true">
						<template v-slot:header>
							<view>
								<image class="logo" :src="item.log" mode="aspectFill"></image>
							</view>
						</template>
						<template v-slot:body>
							<view class="pl8 company-title">{{item.full_name}}</view>
							<view class="pl8">{{item.city}}</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		
		<view v-if="currentIndex == 2 || currentIndex == 3" class="recurit p0-8">
			<view class="text-left p15">
				<text @click="onEntrust('')" :class="resumeForm.entrust == 1 ? 'text-unselected' : 'text-selected'">最新</text>
				<text @click="onEntrust(1)" :class="resumeForm.entrust == '' ? 'text-unselected' : 'text-selected'" class="ml8">推荐</text>
<!-- 				<uni-tag @click="onEntrust('')" :inverted="resumeForm.entrust == 1 ? true : false" text="最新" type="warning" />
				<uni-tag @click="onEntrust(1)" class="ml8" :inverted="resumeForm.entrust == '' ? true : false" text="推荐" type="warning" /> -->
			</view>
			<view v-for="(item ,index) in resume" :key="index">
				<uni-list-chat clickable @click="onLinkResume('/pages/resume/resume',item)" :avatar-circle="true" :title="item.name" :avatar="item.head_img" :note="'地点：'+item.area+'；求职期望：'+item.position" :time="item.brief" ></uni-list-chat>
			</view>
		</view>
		
		<view class="fixed-right">
			<view @click="onLink('/user/resume/resume',0)">
				<view><image src="../../static/sub.png" mode="widthFix"></image></view>
				<view>我的</view>
				<view>简历</view>
			</view>
			<view class="mt15" @click="onLink('/user/recruit/recruit',0)">
				<view><image src="../../static/push.png" mode="widthFix"></image></view>
				<view>发布</view>
				<view>招聘</view>
			</view>
		</view>
		
		
		<uni-drawer ref="showLeft" mode="left" :width="320">
			<uni-row class="mt30">
				<uni-col :span="6">
					<view class="left-city" :style="'height:'+screenHeight+'px'">
						<uni-section v-for="e in city" :key="e.id" @click="selectCity(e)" :title="e.name" :type="city_select_name == e.name ? 'line' : ''"></uni-section>
					</view>
				</uni-col>
				<uni-col :span="18">
					<uni-section :title="'当前选择：'+city_item_select_name" type="line"></uni-section>
					<view :style="'height:'+screenHeight+'px'">
						<view class="grid2">
							<view class="grid-item" v-for="e in city_item" :key="e.id">
								<view :class="city_item_select_name == e.name ? 'city-selected' : 'city' " @click="selectCityItem(e.name)">{{e.name}}</view>
							</view>
						</view>
					</view>
					<view class="save">
						<view class="city" @click="closeDrawer('showLeft')">取消</view>
						<view class="city-selected" style="margin-left: 10%;" @click="saveDrawer('showLeft')">确定</view>
					</view>
				</uni-col>
			</uni-row>
		</uni-drawer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex:0,
				itemsRecurit:['职位','公司','人才','校招'],
				
				form:{page: 1,type:2,city:''},
				loadData : {user:true},
				status:'more',
				dataInfo:[],
				
				company:[],
				
				resumeForm:{page: 1,entrust:''},
				resume:{list:[],num:0,page:1,sum:0},
				
				city:[],
				city_select_name:'',
				city_item_select_name:'不限',
				city_item:[],
				screenHeight:0,
			}
		},
		// api/companyRead
		onShow() {
			this.onGetData()
		},
		methods: {
			showDrawer(e) {
				let _this = this
				this.$request('/api/city','GET').then(res => {
					_this.city = res.data
					uni.getSystemInfo({
						success: (res) => {
							_this.screenHeight = res.windowHeight - 120;
						}
					});
						
					_this.$refs[e].open()
				}).catch(err => {
					console.log(err)
				})
				
			},
			selectCity(e){
				this.city_select_name = e.name
				this.city_item = e.city
			},
			selectCityItem(e){
				this.city_item_select_name = e
			},
			saveDrawer(e){
				this.$refs[e].close()
				this.form.page = 1
				this.form.city = this.city_item_select_name
				if(this.currentIndex == 0){
					this.onGetData()
				}
				
				if(this.currentIndex == 1){
					this.onGetCompany()
				}
				
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
				this.city_item_select_name = '不限'
				this.form.page = 1
				this.form.city = ''
				if(this.currentIndex == 0){
					this.onGetData()
				}
				
				if(this.currentIndex == 1){
					this.onGetCompany()
				}
			},
			onGetData(){
				let _this = this
				this.$request_api('applet_api/recruit/lists','POST',this.form).then(res => {
					_this.dataInfo = res.data
					_this.dataInfo.forEach((e) => {
						if(!e.company){
							let company = {full_name:'新筑时代网络科技有限公司',log:'https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/company-logo.png',scale:0,id:0}
							e.company = company
							
							if(e.company_xinzhu){
								e.company = {full_name:e.company_xinzhu.full_name,log:e.company_xinzhu.log,scale:e.company_xinzhu.scale,id:e.company_xinzhu.id}
							}
						}
						
						e.education = _this.$func.edu[e.education]
						e.experience = _this.$func.exp[e.experience]
						e.company.scale = _this.$func.scale[e.company.scale]
						e.salary = e.salary_type == 2 ? _this.$func.month_wages[e.salary] : _this.$func.year_wages[e.salary]
						e.salary_type = e.salary_type == 2 ? '月' : '年'
					})
					
				}).catch(err => {
					console.log(err)
				})
			},
			onGetCompany(){
				let _this = this
				this.$request_api('applet_api/company','POST',this.form).then(res => {
					_this.company = res.data
					
				}).catch(err => {
					console.log(err)
				})
			},
			onGetResume(){
				let _this = this
				this.$request_api('applet_api/resume','POST',this.resumeForm).then(res => {
					_this.resume = res.data
					console.log(res.data)
					_this.resume.forEach((e) => {
						e.position = e.position ? e.position : '未填写'
						e.education = _this.$func.edu[e.education]
						e.experience = _this.$func.exp[e.experience]
						e.salary = e.salary_type == 2 ? _this.$func.month_wages[e.salary] : _this.$func.year_wages[e.salary]
						e.salary_type = e.salary_type == 2 ? '月' : '年'
						e.salary = e.salary ? e.salary : '面议'
						e.brief = e.education +' | '+ e.salary +'/'+ e.salary_type
					})
					
				}).catch(err => {
					console.log(err)
				})
			},
			onType(data){
				this.form.type = data
				this.form.page = 1
				this.onGetData()
			},
			onEntrust(data){
				this.resumeForm.entrust = data
				this.resumeForm.page = 1
				this.onGetResume()
			},
			onClickRecuritItem(e){
				this.currentIndex = e
				this.form.page = 1
				this.form.title = ''
				if(this.currentIndex == 0){
					this.onGetData()
				}
				
				if(this.currentIndex == 1){
					this.onGetCompany()
				}
				
				if(this.currentIndex == 2){
					this.resumeForm.identity = ''
					this.onGetResume()
				}
				
				if(this.currentIndex == 3){
					this.resumeForm.identity = 1
					this.onGetResume()
				}
			},
			onSearch(e){
				this.form.page = 1
				if(this.currentIndex == 0){
					this.form.title = e.value
					this.onGetData()
				}
				
				if(this.currentIndex == 1){
					this.form.title = e.value
					this.onGetCompany()
				}
			},
			onInput(e){
				this.form.title = e
			},
			onSearchBtn(){
				this.form.page = 1
				if(this.currentIndex == 0){
					this.onGetData()
				}
				
				if(this.currentIndex == 1){
					this.onGetCompany()
				}
			},
			onCancel(e){
				this.form.title = ''
				this.form.page = 1
				if(this.currentIndex == 0){
					this.onGetData()
				}
				
				if(this.currentIndex == 1){
					this.onGetCompany()
				}
			},
			onLink(url,id){
				this.$func.onLink(url,id)
			},
			onLinkResume(url,item){
				uni.navigateTo({
					url: url+"?user_id="+item.uid+"&resume_id="+item.id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.img{width: 60%;height: 60px;}
	.head-image{border-radius: 50%;}
	.user-image{width: 60px;height: 60px;border-radius: 60px;}
	.brief{font-size: .6rem;}
	.recurit{border-bottom: 1px solid #EEE;}
	.logo{width: 50px;height: 50px;border:1px solid #EEE;border-radius: 3px;}
	.company-title{height: 30px;}
	.head_img{width: 60px;border-radius: 60px;height: 60px;}
	.left-city{overflow-y: auto;}
	.grid-item{text-align: center;padding: 8px;font-size: 1rem;}
	.city{border: 1px solid #dedede;padding: 8px;border-radius: 3px;}
	.city-selected{border: 1px solid #FFA901;color: #FFA901;padding: 8px;border-radius: 3px;}
	.save{text-align: center;width: 100%;display: grid;grid-template-columns: 30% 60%;}

</style>
